
.sidebar-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.sidebar-layout__main {
  flex-grow: 1;
  padding-right: 40px;

  > *:first-child {
    margin-top: 0;
  }
}

@media only screen and (max-width: $one-col-breakpoint) {
  .responsive-enabled {
    .sidebar-layout {
      display: block; // kill flexbox, will stack
    }
    .sidebar-layout__main {
      padding-right: 0;
    }
  }
}

.sidebar-layout__sidebar { // no specified width. will shrink by default
  flex-basis: 25%;
  flex-shrink: 0;
  border-left: 1px solid $control-border-color-light;
  padding-left: 20px;
  padding-bottom: 1em;

  > *:first-child {
    margin-top: 0;
  }
}
